<!-- 头部 -->
<include file="Public:header" />
      <form class="layui-form" method="post">
      <!-- header-section end-->
        <div class="index-wrapper" style="background: #fff;padding-bottom: 0px;">  
            <p style="font-size: 16px;padding-left: 10px;padding-top: 10px;">必填选项</p>
            <div class="product-list" style="padding: 10px 20px;margin: 0px;">
                <span>联系人:</span>
                <input type="text" name="name" lay-verify="name" placeholder="请输入姓名" style="border: 0px;background: #F1F2F7;width: 82%;height: 25px;border-radius: 15px;" value="{$_SESSION['name']}">
            </div>
            <div class="product-list" style="padding: 10px 20px;margin: 0px;">
                <span>手机号:</span>
                <input  type="text" name="phone" lay-verify="phone" placeholder="请输入联系人手机" style="border: 0px;background: #F1F2F7;width: 82%;height: 25px;border-radius: 15px;" value="{$_SESSION['phone']}">
            </div>
            <div class="product-list" style="padding: 10px 20px;margin: 0px;">
                <span>验证码:</span>
                <input type="text" name="yzm" lay-verify="yzm" placeholder="请输入手机验证码" style="border: 0px;background: #F1F2F7;width: 45%;height: 25px;border-radius: 15px;">
            </div>
            <a href="javascript:void(0);" id="getCode" onclick="get_mobile_valid();" style="position: absolute;right: 50px;top: 170px;background: #EBA524;padding: 5px;color: #fff;font-size: 10px;border-radius: 5px;">获取验证码</a>

            <div class="product-list" style="padding: 10px 20px;margin: 0px;">
                <span>捐物名称:</span>
                <textarea name="wp_name" lay-verify="wp_name" cols="45" rows="5" style="border: 0px;background: #F1F2F7;border-radius: 8px;width: 96%;" placeholder="填写您捐赠物的名称"></textarea>
            </div>
            <div class="product-list" style="padding: 10px 20px;margin: 0px;">
                <span>捐物数量:</span>
                <input type="text" name="num" lay-verify="num" placeholder="如：5" style="border: 0px;background: #F1F2F7;width: 75%;height: 25px;border-radius: 15px;" value="">
            </div>
            <div style="margin: 1px 20px;">
              <div style="width: 50%;float: left;" id="xcjs">
                <input type="radio" name="is_fanshi" value="0" title="现场捐书" checked="">
              </div>
              <div id="smss">
                <input type="radio" name="is_fanshi" value="1" title="上门收书">
              </div>
            </div>
            <div class="product-list" style="padding: 10px 20px;margin: 0px;display: none;" id="ssdz">
                <span>收书地址:</span>
                <input type="text" name="address" lay-verify="address" placeholder="如：某小区" style="border: 0px;background: #F1F2F7;width: 75%;height: 25px;border-radius: 15px;" value="">
            </div>
            <script type="text/javascript">
                $(function(){
                    $('#smss').click(function(event) {
                        $('#ssdz').show();
                        }
                    );
                    $('#xcjs').click(function(event) {
                        $('#ssdz').hide();
                        }
                    );
                })
            </script>
            <div style="height: 10px;background: #F7F7F7;"></div>
        </div>
        <div class="index-wrapper" style="background: #fff;padding-bottom: 0px;padding-top: 10px;">  
            <p style="font-size: 16px;padding-left: 10px;">非必填选项</p>
            <div class="product-list" style="padding: 10px 20px;margin: 0px;">
                <span>工作类型:</span>
                <input type="text" name="jop_type" lay-verify="jop_type" placeholder="请输入您的工作类型" style="border: 0px;background: #F1F2F7;width: 75%;height: 25px;border-radius: 15px;" value="">
            </div>
            <div class="product-list" style="padding: 10px 20px;margin: 0px;">
                <span>备注信息:</span>
                <input  type="text" name="beizhu" lay-verify="beizhu" placeholder="请输入备注信息" style="border: 0px;background: #F1F2F7;width: 75%;height: 25px;border-radius: 15px;">
            </div>

            <div class="notice" style="text-align: center;"><span id="resinfo" style="font-size: 18px;"></span></div>
            <div style="padding: 20px 20px;">
                <p style="text-align: left;font-size: 8px;padding-bottom: 5px;">
                    <span style="font-weight: bold;font-size: 8px;">捐书要求：</span>
                    <span>书本是学生平时阅读的课外书(非学科教材)书本封面及内容完整可供正常阅读。</span></p>
                <p style="text-align: left;font-size: 8px;padding-bottom: 5px;">
                    <span style="font-weight: bold;font-size: 8px;">上门收书：</span>
                    <span>我们的志愿者会提前预约上门收书,请保持手机畅通,部分社区会成立捐书站,方便大家捐赠。</span></p>
            </div>

            <input type="hidden" name="xm_id" value="{$xm_id}">
            <input type="hidden" name="fq_id" value="{$fq_id}">
            <button lay-submit="" lay-filter="*" style="background-color: #FF921D;color: #fff;width: 100%;height: 46px;border:0px;">下一步</button>
        </div>
       </form>   
        

<script type="text/javascript">
    layui.use(['form','layer','upload'], function(){
       $ = layui.jquery;
      var layer = layui.layer
      ,form = layui.form();
      //layer.msg('Hello World');
    //自定义验证规则
    form.verify({
      name: function(value){
        if(value.length < 1){
          return '请输入姓名';
        }
      }
      ,phone: function(value){
        if(value.length < 1){
          return '请输入手机号';
        }
      }
      ,yzm: function(value){
        if(value.length < 1){
          return '请输入验证码';
        }
      }
      ,wp_name: function(value){
        if(value.length < 1){
          return '请输入捐物名称';
        }
      }
      ,num: function(value){
        if(value.length < 1){
          return '请输入捐物数量';
        }
      }
    });

      //交互
    form.on('submit(*)', function(data){
        $.ajax({
            url: "{:U('index/jw')}",//请求地址
            type: "post",//请求方式
            dataType: "json",//返回数据类型
            data: data.field,//发送的参数
            })
            .done(function(response) {
                  if(response.error==0){
                     layer.msg(response.info ,{icon:5});
                  }else{
                     layer.msg(response.info ,{icon:6});
                     location.href = response.url;
                  }
              })
            .fail(function() {
                alert("ajxs交互失败");
            })  

          return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });   

    });

    /*发送短信验证码*/
    function get_mobile_valid(){
        layer.confirm('确认要发送吗？',function(index){
            //发异步删除数据
            var to = $('input[name="phone"]').val();
            $.ajax({
                url: "{:U('index/send_to')}",//请求地址
                type: "post",//请求方式
                dataType: "json",//返回数据类型
                data: {to:to},//发送的参数
                })
                .done(function(response) {
                      if(response.error==1){
                        layer.msg(response.info ,{icon:6});
                      }else{
                        layer.msg(response.info ,{icon:5});
                      }
                  })
                .fail(function() {
                    alert("ajxs交互失败");
                })  
            return false;
        });
    }

</script>

    </body>
</html>